<template>
	<view class="contentBox">
		<view class="title">名称：</view>
		<input type="text"
			class="name_box"
			:placeholder="placeholders"
			@focus="focusStyle"
			@blur="blurStyle"
			:class="{focusstyle:isFocus}"
			v-model="mainNames" />		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name:"CheckName",
		computed:{
			...mapState(['mainCabinet']),
			placeholders(){
				return '请编辑'+this.$store.state.mainCabinet.modifyType+'名称'		
			}
		},
		data() {
			return {
				isFocus:false,
				mainNames:''
			}
		},
		
		mounted() {
			this.mainNames = this.mainCabinet.mainName
			this.$store.commit('checkModifyName',this.mainNames)
		},
		methods: {
			//添聚焦样式
			focusStyle(){
				this.isFocus = true;
			},
			//除聚焦样式
			//修改vuex数据modifyName
			blurStyle(e){
				this.isFocus = false;
				if(this.mainNames===''){
					// console.log('111',e.detail.value);
					// this.$store.commit('checkModifyName',this.mainNames)
					uni.showToast({
						title:"主柜名字不能为空"
					})
					// returnzb
				}
				console.log(this.mainNames);
				this.$store.commit('checkModifyName',this.mainNames)
			}
		}
	}
</script>

<style scoped lang="less">
	.contentBox {
		background:#F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		// width: 27.44vw;
		width: 45.44vw;
		margin: 0 auto;
		// margin-bottom: 30rpx;
		margin-bottom: 1.97vh;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	.title {
		color: #777777;
		font-size: 34rpx;
		width: 5vw;
		padding:24rpx 2rpx 24rpx 36rpx;
		box-sizing: border-box;
	}
	.name_box {
		// width:584rpx;
		// height: 88rpx;
		width: 20.25vw;
		height: 5.7vh;
		// line-height: 80rpx;
		line-height: 5.5vh;
		background: #FFFFFF;
		border: 4rpx solid #CCCCCC;
		border-radius:20rpx;
		font-size:36rpx;
		padding-left:45rpx;
		margin-left: 24rpx;
		color: #222;
		box-sizing: border-box;
	}
	.focusstyle {
		border: 4rpx solid #4F9AFF !important;
	}
	
</style>


